<script setup>
import { useCartStore } from "@/stores/cart";
import { ref } from "vue";
const cartStore = useCartStore();
const count = ref(1);
//单选框更新逻辑
const handleChange = (item, selected) => {
  cartStore.singleCheck(item,selected)
  console.log(item,selected)
}
//单选框全选逻辑
const allCheck = (checked) => {
  console.log(checked)
  cartStore.allCheck(checked)
}
</script>

<template>
  <div
    class="cartListContainer"
    style="
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 30px 0 30px 0;
      flex-wrap: wrap;
    "
  >
    <div
      class="mainContainer"
      style="width: 1240px; background-color: white; border-radius: 10px;"
    >
      <div
        class="header"
        style="
          width: 100%;
          height: 70px;
          padding: 20px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #c0c0c0;
        "
      >
        <div style="width: 5%; height: 100%">
          <el-checkbox :model-value="cartStore.isAll" @change="(checked) => allCheck(checked)" size="large"></el-checkbox>
        </div>
        <div style="width: 34%; height: 100%; text-align: center">商品信息</div>
        <div style="width: 17%; height: 100%; text-align: center">单价</div>
        <div style="width: 17%; height: 100%; text-align: center">数量</div>
        <div style="width: 17%; height: 100%; text-align: center">小计</div>
        <div style="width: 10%; height: 100%; text-align: center">操作</div>
      </div>
      <div
        class="main"
        style="
          width: 100%;
          height: 500px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        v-if="cartStore.cartList.length === 0"
      >
        <div
          style="
            width: 300px;
            height: 300px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
          "
        >
          <img style="width: 80%" src="@/assets/images/none.png" />
          <div style="width: 100%; color: #c0c0c0; text-align: center">
            购物车列表为空
          </div>
          <div>
            <el-button type="primary" @click="$router.push('/')"
              >随便逛逛</el-button
            >
          </div>
        </div>
      </div>
      <div v-else style="width: 100%">
        <div
          class="goodsItem"
          style="width: 100%; height: 120px; padding: 20px; display: flex"
          v-for="item in cartStore.cartList"
          :key="item.id"
        >
          <div
            style="width: 5%; height: 100%; display: flex; align-items: center"
          >
            <el-checkbox :model-value="item.selected" @change="(selected) => handleChange(item,selected) " size="large"></el-checkbox>
          </div>
          <div style="width: 34%; height: 100%; display: flex">
            <div class="goodsImg" style="display: flex; align-items: center">
              <img :src="item.picture" alt="" />
              <div style="margin-left: 10px; color: #7a7a7a">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div
            style="
              width: 17%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            &yen;{{ item.price }}
          </div>
          <div
            style="
              width: 17%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <el-input-number v-model="count" :min="1"></el-input-number>
          </div>
          <div
            style="
              width: 17%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            {{ (item.price * item.count).toFixed(2) }}
          </div>
          <div
            style="
              width: 10%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #27ba9b;
            "
          >
            删除
          </div>
        </div>
      </div>
    </div>
    <div
      class="footerContainer"
      style="
        width: 1240px;
        height: 60px;
        background-color: white;
        margin-top: 20px;
        padding: 20px;
        display: flex;
        justify-content: space-between;align-items: center;
      "
      v-if="cartStore.cartList.length !== 0"
    >
      <div class="footerLeft" style="width: 40%;height: 100%;display: flex;align-items: center;">
        <div style="font-weight: 700;margin-left: 50px;">共 {{ cartStore.allCount }} 件商品，已选择 {{ cartStore.checkCount }} 件，商品合计：</div>
        <div style="color: red;font-weight: 700;">&yen;{{ cartStore.allUse.toFixed(2) }}</div>
        
      </div>
      <el-button style="margin-right: 50px;" @click="$router.push('/checkout')" type="primary" >下单结算</el-button>
    </div>
  </div>
</template>

<style scoped>
</style>